<template>
    <div class="div-container">
        <div class="button">
            <cloud-info-show-view title-name="俯仰角" :count-value="-0.3" class="subnav"/>
            <cloud-control-buttons class="subnav" @button-move="buttonMoveMethod"/>
            <cloud-info-show-view title-name="水平角" :count-value="0.3" class="subnav"/>
        </div>
        <hr>
    </div>

</template>

<script>
	import CloudInfoShowView from '@/components/maps/cloud-info-show-view'
	import CloudControlButtons from '@/components/maps/cloud-control-buttons'

	export default {
		name: 'CloudControlItemView',
		components: {
			CloudInfoShowView,
			CloudControlButtons
		},
		methods: {
			buttonMoveMethod(id) {
				this.$emit('button-move', id)
			}
		}
	}
</script>

<style scoped lang="scss">
    .div-container {
        .button {
            height: 120px;
            display: flex;
            justify-content: space-around;
        }

        hr {
            margin-left: 20px;
            margin-right: 20px;
            margin-top: 16px;
            size: 1px;
            color: #FFFFFF;
            alignment: center;
            opacity: 0.2;
        }
    }
</style>
